<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas01" width="500" height="500"> </canvas>

		<script type="text/javascript">
			const canvas = document.getElementById("canvas01")
			const ctx = canvas.getContext('2d')


			// ctx.fillStyle = "rgb(200,0,0)";
			// ctx.fillRect(10, 10, 55, 50);
			// ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
			// ctx.fillRect(30, 30, 55, 50);

			// ctx.fillRect(25, 25, 100, 100);  // 填充一个矩形
			// ctx.clearRect(45, 45, 60, 60);   // 清除一个区域的图形

			// 绘制黄色背景   ctx.strokeRect
			// ctx.beginPath();
			// ctx.fillStyle = '#ff6';
			// ctx.fillRect(0, 0, canvas.width, canvas.height);

			// // 绘制蓝色三角形
			// ctx.beginPath();
			// ctx.fillStyle = 'blue';
			// ctx.moveTo(20, 20);
			// ctx.lineTo(180, 20);
			// ctx.lineTo(130, 130);
			// ctx.closePath();
			// ctx.fill();

			// // 清除一部分画布
			// ctx.clearRect(10, 10, 120, 100);



			// ctx.strokeRect(0, 0, canvas.width, canvas.height);  // 绘制一个矩形边框

			// ctx.shadowColor = '#d53';
			// ctx.shadowBlur = 20;
			// ctx.lineJoin = 'round';
			// ctx.lineWidth = 30;
			// ctx.strokeStyle = '#38f';
			// ctx.strokeRect(30, 30, 160, 90);


			// 绘制路径
			// ctx.beginPath()
			// ctx.fillStyle = '#999'
			// ctx.moveTo(60,60)
			// ctx.lineTo(120,60)
			// ctx.lineTo(90,90)
			// ctx.closePath()
			// ctx.fill()


			// ctx.beginPath();
			// ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
			// ctx.moveTo(110, 75);
			// ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
			// ctx.moveTo(65, 65);
			// ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
			// ctx.moveTo(95, 65);
			// ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
			// ctx.stroke();


			for (var i = 0; i < 4; i++) {
				for (var j = 0; j < 3; j++) {
					ctx.beginPath();
					var x = 25 + j * 50; // x 坐标值
					var y = 25 + i * 50; // y 坐标值
					var radius = 20; // 圆弧半径
					var startAngle = 0; // 开始点
					var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
					var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针

					ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

					if (i > 1) {
						ctx.fill();
					} else {
						ctx.stroke();
					}
				}
			}
		</script>
	</body>
</html>
